<template>
    <div class="flex-grow flex flex-col justify-center items-center">
        <p style="text-align: center; font-size: 2rem; font-weight: 600; margin: -0.5rem auto 0rem auto;">
            文章词汇量检测结果：
        </p>
        <p>
            <a style="font-size: 2rem; font-weight: 600;">约为</a>
            <a style="font-size: 3rem; font-weight: 600; margin-bottom: 1rem;">
                <span class="text-blue-600 font-bold">{{ vocab }}</span>
            </a>
            <a style="font-size: 2rem; font-weight: 600;">个单词</a>
        </p>

        <!-- 可信度显示 -->
        <div class="gauge-container"
            style="display: flex; justify-content: center; align-items: end; gap: 4px; margin: 2rem 0 -0.5rem 0;">
            <!-- 低可信度段 (0.3) -->
            <div class="gauge-segment"
                style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <div class="gauge-tick" :class="{ 'gauge-active': confidence >= 0.3 }"
                    style="width: 50px; height: 10px; background-color: #F56C6C; border-radius: 4px; margin-bottom: 4px; transition: all 0.3s ease;">
                </div>
            </div>

            <!-- 较低可信度段 (0.5) -->
            <div class="gauge-segment"
                style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <div class="gauge-tick" :class="{ 'gauge-active': confidence >= 0.5 }"
                    style="width: 50px; height: 10px; background-color: #E6A23C; border-radius: 4px; margin-bottom: 4px; transition: all 0.3s ease;">
                </div>
            </div>
            <!-- 较高可信度段 (0.7) -->
            <div class="gauge-segment"
                style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <div class="gauge-tick" :class="{ 'gauge-active': confidence >= 0.7 }"
                    style="width: 50px; height: 10px; background-color: #fee900; border-radius: 4px; margin-bottom: 4px; transition: all 0.3s ease;">
                </div>
            </div>
            <!-- 高可信度段 (0.9)-->
            <div class="gauge-segment"
                style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
                <div class="gauge-tick" :class="{ 'gauge-active': confidence >= 0.9 }"
                    style="width: 50px; height: 10px; background-color: #67C23A; border-radius: 4px; margin-bottom: 4px; transition: all 0.3s ease;">
                </div>
            </div>

        </div>

        <p style="font-size: 1rem; margin-top: 0.5rem; color: #1a1a1a;">
            {{ confidenceText }}
        </p>

        <el-button type="primary" @click="$emit('reset')" size="large" class="test-button text-lg px-8">
            重新检测
        </el-button>
    </div>
</template>

<script setup>
    import { computed } from 'vue'

    const props = defineProps({
        vocab: {
            type: Number,
            required: true
        },
        confidence: {
            type: Number,
            default: 0.5
        }
    })

    const emit = defineEmits(['reset'])

    // 计算可信度百分比
    const confidencePercentage = computed(() => {
        return Math.round(props.confidence * 100)
    })

    // 根据可信度确定颜色
    const confidenceColor = computed(() => {
        if (props.confidence === 0.3) return '#F56C6C' // 红色 - 低可信度
        if (props.confidence === 0.5) return '#E6A23C' // 橙色 - 较低可信度
        if (props.confidence === 0.7) return '#EFEF13' // 较高可信度
        if (props.confidence === 0.9) return '#67C23A' // 蓝色 - 高可信度
        return '#909399' // 默认灰色
    })

    // 根据可信度确定文本描述
    const confidenceText = computed(() => {
        if (props.confidence === 0.3) return '低可信度'
        if (props.confidence === 0.5) return '较低可信度'
        if (props.confidence === 0.7) return '较高可信度'
        if (props.confidence === 0.9) return '高可信度'
        return '未知可信度'
    })
</script>

<style scoped>
    .test-button {
        display: block;
        margin: 0 auto;
    }

    .confidence-section {
        background: #f8f9fa;
        padding: 1rem;
        border-radius: 8px;
        border: 1px solid #e9ecef;
    }

    .gauge-tick {
        opacity: 0.3;
        box-shadow: none;
    }

    .gauge-tick.gauge-active {
        opacity: 1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        transform: scale(1.05);
    }

    .gauge-container {
        position: relative;
    }

    .gauge-segment {
        position: relative;
    }
</style>